<template>
  <div class="detail" v-if="goodsinfo">
    <div class="top">
      <div class="item">订单200元免运费（门店急送订单除外）</div>
      <div class="info-title">
        {{ goodsinfo.type }}&nbsp;&nbsp;{{ goodsinfo.goodsname }}
      </div>
    </div>
    <div class="goods-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in list" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="top-line">
      <div class="current-price">￥{{ goodsinfo.goodsprice }}</div>
      <div class="original-price">初上市价格：￥{{ goodsinfo.preprice }}</div>
    </div>
    <p class="teyou">限时特优</p>
    <p class="tui">支持30天无理由退换货</p>
    <div class="choose-bar" @click="open">
      <span class="text" v-if="flag">请选择配送方式，颜色，尺码，数量</span>
      <span class="text" v-else>已选择 快递配送 {{colorvalue}} {{sizevalue}}</span>
      <van-icon name="arrow" />
     
    </div>

    <div class="vux-tab">
        <div class="tab-title"><span>商品详情</span><van-icon name="arrow-up" /></div>
        <img src="https://www.uniqlo.cn/cms/ca5d96e7cf690d2ec9a95dae0041f97d.jpg" alt="">
    </div>
     <div class="size-tab">
        <div class="size-title"><span>商品尺寸</span><van-icon name="arrow-up" /></div>
        <img src="https://www.uniqlo.cn/hmall/test/u0000000023246/measurement/1.jpg" alt="">
    </div>
    <div class="tab-bar">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
       <div @click="gotocar"> <van-goods-action-icon icon="cart-o" text="购物车" /></div>
        <div class ="addtocar" @click="addtocar"><van-goods-action-button
          color="#be99ff"
          type="warning"
          text="加入购物车"
        /></div>
       <div class="buy"> <van-goods-action-button
          color="#7232dd"
          type="danger"
          text="立即购买"
        /></div>
      </van-goods-action>
    </div>

    <!-- 弹出窗 -->
 
    <div class="choose-type" v-show="show">
        <div class="pic-info">
            <img :src="goodsinfo.goodsimg" alt="">
            <div class="info">
                <div class="info-price">￥{{goodsinfo.goodsprice}}</div>
                <div class="info-size">
                    
                    <span v-if="flag">请选择尺码与颜色</span>
                    <span v-else>已选：{{colorvalue}} {{sizevalue}}</span>
                </div>
            </div>
            <div class="close" @click="close"><van-icon name="cross" /></div>
        </div>
        <div class="color-cell">
            <div class="title">颜色:</div>
            <ul>
            <li  v-for="(item,index) in goodsinfo.goodscolor" :key="index" :class="{coloractive:item.id==colorindex}" @click="choosecolor(item)">{{item.color}}</li>
            </ul>
        </div>
        <div class="size-cell">
            <div class="title">尺码：</div>
            <ul>
                <li v-for="(item,index) in goodsinfo.goodssize" :key="index" :class="{sizeactive:item.id==sizeindex}" @click="choosesize(item)">{{item.size}}</li>
            </ul>
        </div>
        <div class="revision">
            <div class="field">
                <div class="left">礼品包装选择</div>
                <div class="right">礼品包装信息</div>
            </div>
            <div class="select-msg">
                <span>不需要</span>
                <img src="" alt="">
            </div>
        </div>
        <div class="count-cell">
            <div class="left">购买数量</div>
            <div class="center">
                <div class="reduce" @click="reduce"><van-icon name="minus" /></div>
                <input type="text" v-model="buynum">
                <div class="add" @click="add"><van-icon name="plus" /></div>
            </div>
            <div class="right">仓库充足</div>
        </div>
        <div class="button-bar">
            <button class="button-add" @click="addtocar">添加至购物车</button>
            <button class="button-buy" @click="buy">立即购买</button>
        </div>
    </div>
 
  </div>
</template>
<script>
import {mapActions} from "vuex"
// import shoppingcar from "../modules/shoppingcar"
// import swiper from "../components/swiper"
import goodslist from "../model/goodslistModel";

import shoppingcarModel from "../model/shoppingcarModel"
import bus from "../bus";
import Vue from 'vue';
import { Toast } from 'vant';


Vue.use(Toast);
export default {
  data() {
    return {
      goodsinfo: {},
      list: [],
      show:false,
      colorindex:"",
      sizeindex:"",
      sizevalue:"",
      colorvalue:"",
      flag:true,
      buynum:1
    };
  },
  computed: {
    //    ...mapState("goodslist",{
    //    list:state=>state.list
    //    })
  },
  methods: {
       ...mapActions("shoppingcar",["asyncAddGoods","asyncUpdateBuynum"]),
    open(){
        this.show = true
    },
    close(){
        this.show = false
    },
    choosecolor(item){
        this.colorindex = item.id
       this.colorvalue = item.color
       this.flag = false
    },
    choosesize(item){
        this.sizeindex = item.id
       this.sizevalue = item.size
       this.flag = false
    },
    add(){
        if(this.buynum >= 200){
            this.buynum == 200
            return false
        }
        this.buynum++
    },
    reduce(){
        if(this.buynum<=1){
            this.buynum == 1
            return false
        }
        this.buynum--
    },
    buy(){
      Toast.fail('待完善');
    },
    gotocar(){
      this.$router.push("/shoppingcar")
    },
    addtocar(){
      // console.log(this.buynum,this.colorvalue,this.sizevalue);
      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"))
      if(userinfo){
        if(this.sizevalue&&this.colorvalue){//当已经选好商品规格
        // console.log(this.goodsinfo.goodsid);
        shoppingcarModel.query({userid:userinfo.id,goodsid:this.goodsinfo.goodsid}).then(({data})=>{
          if(data.length){
             shoppingcarModel.update(data[0].id,{buynum:data[0].buynum*1+this.buynum}).then(()=>{
                console.log(data);
              Toast.success('更新成功');
            })
            // this.asyncUpdateBuynum(userinfo.id,{buynum:data[0].buynum*1+this.buynum})
          }else{
             this.asyncAddGoods({
            userid:userinfo.id,
            goodsid:this.goodsinfo.goodsid,
            goodsimg:this.goodsinfo.goodsimg,
            goodsname:this.goodsinfo.goodsname,
            goodstype:this.goodsinfo.type,
            color:this.colorvalue,
            size:this.sizevalue,
            price:this.goodsinfo.goodsprice,
            buynum:this.buynum
          })
          }
           Toast.success('添加成功');
        })
       
         
        }else {
          Toast.fail('请选择规格');
        }
      }else {
        this.$router.push("/mine")
      }
    }
    
  },

  created() {
    bus.$emit("changeflag", false);
    let id = this.$route.params.id;
    goodslist.query({ id }).then(({ data }) => {
      this.goodsinfo = data[0];
      // console.log(this.userinfo);
      this.list = this.goodsinfo.goodssmallimg;
      // console.log(this.list);
    });
  },
  destroyed() {
    bus.$emit("changeflag", true);
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.detail {
    position: relative;
    padding-bottom: 40px;
  .goods-swipe {
    width: 375px;
    height: 375px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .top {
    .item {
      width: 375px;
      height: 32px;
      color: #fff;
      font-weight: bold;
      background: #9a9e9f;
      line-height: 32px;
    }
    .info-title {
      color: #1b1b1b;
      font-size: 14px;
      font-weight: bold;
      line-height: 40px;
      text-align: left;
      padding-left: 20px;
    }
  }
  .top-line {
    width: 345px;
    height: 30px;
    margin: 20px auto;
    display: flex;
    line-height: 30px;
    justify-content: space-between;
    .current-price {
      width: 62px;
      height: 25px;
      color: #ff0000;
      font-size: 22px;
      font-weight: bold;
    }
    .original-price {
      font-size: 13px;
      color: #7d7d7d;
    }
  }
  .teyou {
       box-sizing: border-box;
    font-size: 13px;
    color: #ff0000;
    text-align: left;
    padding-left: 20px;
  }
  .tui {
      box-sizing: border-box;
    text-align: right;
    font-size: 13px;
    color: #7d7d7d;
    padding-right: 10px;
  }
  .choose-bar {
    box-sizing: border-box;
    width: 375px;
    height: 63px;
    display: flex;
    justify-content: space-between;
    line-height: 63px;
    padding: 0 10px;
    margin-top: 20px;
    .van-icon-arrow {
      font-size: 20px;
      line-height: 63px;
    }
    .text {
      font-size: 14px;
      color: #1b1b1b;
    }
  }
  .tab-bar {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 49px;
      
    .addtocar {
      width: 140px;
      
    }
    .buy {
      width: 140px;
    }
  }
  .vux-tab {
      width: 100%;
     img {
          width: 100%
        }
      .tab-title {
           box-sizing: border-box;
          display: flex;
          width: 100%;
          height: 66px;
          border-bottom: 1px solid #ababab;
          text-align: left;
          font-weight: bold;
          color: #1b1b1b;
          font-size: 15px;
          line-height: 66px;
          padding: 0 20px;
          justify-content: space-between;
        .van-icon-arrow-up {
            line-height: 66px;
            font-size: 18px;
        }
      }
  }
  .size-tab {
      @extend .vux-tab;
      img {
        width: 100%
      }
     .size-title {
         @extend .tab-title;
     }
  }
  .choose-type {
      width: 375px;
    //   height: 100%;
      background: #fff;
      position: fixed;
      top: 0;
      overflow: hidden;
      padding: 4%;
      box-sizing: border-box;
      .pic-info {
          width: 375px;
          height: 151px;
          border-bottom: 1px solid #eee;
          display: flex;
        //   position: relative;
          img {
              width: 120px;
              height: 120px;
          }
          .info {
           
              text-align: left;
               padding-left: 10px;
              .info-price {
              font-size: 18px;
              color: #ff0000;
              font-weight: bold;
             
          }
          .info-size {
              font-size: 13px;
              color: #1b1b1b;
          }
          }
          .close {
              position: absolute;
              right: 20px;
              top: 20px;
              font-size: 20px;
          }  
      }
      .color-cell {
          width: 375px;
          height: 105px;
          border-bottom: 1px solid #eee;
          .title {
              font-size: 14px;
              color: #1b1b1b;
              text-align: left;
              line-height: 35px;

          }
          ul {
              display: flex;
              flex-wrap: wrap;
              margin-top: 16px;
              padding-right: 10px;
              li {
                  border: 2px solid #eee;
                  padding: 4px;
                  margin-right: 10px;
                  font-weight: bold
              }
              .coloractive {
                  border: 1px solid #ff0000
              }
          }
      }
      .size-cell {
          @extend .color-cell;
          height: 150px;
          ul {
              li {
                  margin-bottom: 5px;
              }
              .sizeactive {
                  border: 1px solid #ff0000;
              }
          }
      }
      .revision {
          margin-top: 10px;
          .field {
              display: flex;
              justify-content: space-between;
              color: #1b1b1b;
              line-height: 30px;
              .left {
                  font-size: 14px;  
              }
              .right {
                  font-size: 13px;
                  text-decoration: underline;
                  
              }
          }
          .select-msg {
              width: 162px;
              height: 43px;
              border-bottom: 1px solid #999;
              display: flex;
              justify-content: space-between;
              line-height: 43px;
              padding: 0 5px;
              box-sizing: border-box;
              margin-top: 10px;
              img {
                  width: 20px;
                  height: 20px;
                  margin-top: 10px;
              }
          }
      }
      .count-cell {
          width: 375px;
          height: 70px;
          display: flex;
          margin-top: 15px;
          align-items: center;
          .center {
              box-sizing: border-box;
              width: 226px;
              height: 40px;
              display: flex;
              padding-left: 100px;
              input {
                  width: 75px;
                  height: 40px;
                  text-align: center;
                  border: 1px solid #eee;
                  margin: 0 5px;
              }
              .reduce,.add {
                  height: 40px;
                  line-height: 50px;
                  font-size: 18px;
              }
          }
          .right {
              color: #7d7d7d;
              padding-left: 10px;
          }
          .left {
              color: #1b1b1b;
              font-weight: bold;
          }
      }
      .button-bar {
          width: 375px;
          height: 48px;
          display: flex;
          margin-top: 20px;
          z-index: 10000;
          button {
              border: 0;
              font-size: 16px;
          }
          .button-add {
              width: 50%;
              background: #ff0000;
              color: #fff;
          }
          .button-buy {
              width: 50%;
              background: #fff;
              color: #ff0000;
          }
      }
  }
}
</style>